<template>
	<div class="pay">
		<div class="shopcart_header">
			<p>订单详情</p>
		</div>
		<div class="nav">
			<p>卖家已付款</p>
		</div>
		<div class="pay-header">
			<ul>
				<li>
					1
				</li>
				<li>
					<div class="store">
						<p>收货人: <span>rer</span></p>
						<p>13855667878</p>
					</div>
					<div class="address">
						<p>收货地址:<span>北京朝阳区建国门外大街国贸一座</span></p>
					</div>
				</li>

			</ul>
		</div>
		<div class="coding">
			<div class="encoding">
				<p>订单编码:564654654645 <span>复制</span></p>
				<hr />
			</div>
			<div class="shopping">
				<img src="../assets/family_13.jpg" alt="" />
				<div class="short">
					马丁靴高跟超短靴女真皮英伦风雪地靴厚底中筒
					<p>颜色分类: 黑色: 尺寸:****</p>
				</div>
				<div class="money">
					<p>￥128.00</p>
					<p class="span"><s>￥328.00</s></p>
					<a>红包劵: ￥ 20.00</a>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="count">
				<div class="refund">
					<input type="button" value="7天退换货" />
				</div>
				<div class="refund_fa">
					<input type="button" value="提醒发货" />
					<input type="button" value="退款" />
				</div>

			</div>
			<div class="hr"></div>

			<div class="pay-footer">
				<div class="discount">
					<p>优惠券</p>
					<p>-￥20.00</p>
				</div>
				<div class="discount">
					<p>配送方式</p>
					<p>免邮</p>
				</div>
				<div class="discount">
					<p>实付款</p>
					<p>￥546</p>
				</div>
			</div>
			<button class="pay-footer-button">联系卖家</button>

		</div>
		<div class="pay-footer-dan">
			<p>订单编号: <span>320849747472</span></p>
			<p>支付交易号:<span>3424232342</span></p>
			<p>付款时间:<span>24242</span></p>
			<p>创建时间:<span>242</span></p>
		
		</div>
	</div>
</template>
<script>
	
</script>

<style scoped="scoped">
	body {
		height: auto;
	}
	
	#footer-show {
		position: fixed;
		bottom: 0;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background: rgba(0, 0, 0, 0.65);
	}
	
	.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		height: 25%;
	}
	
	.nav {
		width: 100%;
		height: 2.41rem;
		background: white;
		margin-top: 0.18rem;
		background: #ff3b57;
	}
	
	.nav p {
		font-size: 0.5rem;
		color: white;
		line-height: 2rem;
		margin-left: 0.28rem;
	}
	
	.payment input {
		border: 0px solid #FF1D51;
		background: #FF1D51;
		color: white;
	}
	
	ul li {
		display: flex;
		flex-direction: column;
		background: white;
		width: 100%;
		margin: 0;
		height: 9%;
		line-height: 1.13rem;
	}
	
	.pay-footer {
		width: 100%;
		background: white;
	}
	
	.pay-footer-button {
		width: 1.65rem;
		height: 0.52rem;
		background: white;
		border-radius: 5px;
		margin-left: 40%;
		border: 1px solid #000000;
	}
	
	.hr {
		width: 95%;
		height: 0.01rem;
		background: #989898;
		transform: translateX(3%);
	}
	
	.pay {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		margin: 0;
		padding: 0;
	}
	
	.sum {
		line-height: 0.95rem;
		margin-right: 0.23rem;
	}
	
	.pay-footer2 {
		display: flex;
		background-color: white;
		height: 0.95rem;
		justify-content: flex-end;
		margin-top: 0.36rem;
	}
	
	.discount {
		display: flex;
		justify-content: space-between;
		font-size: 0.3rem;
		height: 0.56rem;
	}
	
	.discount>p:first-child {
		margin-left: 0.25rem;
		margin-top: 0.15rem;
	}
	
	.discount>p:nth-child(2) {
		margin-right: 0.25rem;
		margin-top: 0.15rem;
	}
	
	ul li {
		list-style: none;
	}
	
	.shopcart_header {
		width: 100%;
		height: 1rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		justify-content: center;
		background: white;
	}
	
	.shopcart_header p {
		text-align: center;
		line-height: 1rem;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.pay-header ul {
		display: flex;
		justify-content: flex-start;
		padding: 0;
		margin-top: 0.2rem;
		height: 2.01rem;
		background: white;
	}
	
	.pay-header>ul>li:first-child {
		width: 12%;
		background: white;
	}
	
	.pay-header>ul>li:nth-child(2) {
		width: 75%;
		background: white;
	}
	
	.pay-header>ul>li:nth-child(3) {
		width: 13%;
		background: white;
	}
	
	.store {
		display: flex;
		justify-content: space-between;
		line-height: 1rem;
	}
	
	.address {
		display: flex;
		justify-content: space-between;
		text-overflow: ellipsis;
		overflow: hidden;
		letter-spacing: 0.03rem;
	}
	
	.address>p:nth-child(2) {
		text-overflow: ellipsis;
		overflow: hidden;
		word-wrap: break-word;
	}
	
	.coding {
		width: 100%;
		background: white;
	}
	
	.encoding {
		width: 100%;
		height: 0.78rem;
		background: white;
		margin-top: 0.1rem;
		border-bottom: 1px solid gainsboro;
	}
	
	.encoding p {
		line-height: 0.78rem;
		margin-left: 0.18rem;
		letter-spacing: 0.03rem;
	}
	
	.encoding span {
		color: #FF1D51;
	}
	
	.shopping {
		display: flex;
		justify-content: flex-start;
		height: 2.4rem;
		margin-top: 0.16rem;
		background: #F4F4F4;
	}
	
	.shopping img {
		width: 23%;
		height: 60%;
		margin-left: 0.4rem;
		margin-top: 0.2rem;
	}
	
	.short {
		margin-top: 0.15rem;
		margin-left: 0.23rem;
		font-size: 0.28rem;
		width: 3.2rem;
		letter-spacing: 0.01rem;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.short p {
		font-size: 0.24rem;
		margin-top: 0.04rem;
		color: #777777;
		font-family: "微软雅黑";
	}
	
	.money {
		margin-left: 0.28rem;
		line-height: 0.8rem;
	}
	
	.span {
		color: #777777;
		margin-top: -0.3rem;
	}
	
	.money a {
		margin-left: -1rem;
		font-size: 0.3rem;
		color: red;
	}
	
	.main {
		background: white;
	}
	
	.count {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 0.92rem;
		margin-top: -0.3rem;
		background: white;
	}
	
	.refund_fa {
		margin-right: 0.2rem;
		margin-top: 0.19rem;
	}
	
	.refund_fa>input:first-child {
		width: 1.61rem;
		height: 0.49rem;
		border: 1px solid #000000;
		border-radius: 5px;
		background: white;
	}
	
	.refund_fa>input:last-child {
		width: 1rem;
		height: 0.49rem;
		border: 1px solid #ff3b57;
		border-radius: 5px;
		background: #ff3b57;
		color: white;
	}
	
	.refund input {
		width: 1.66rem;
		margin-left: .26rem;
		height: 0.49rem;
		border: 0px solid #ff3b57;
		margin-left: 0.2rem;
		border-radius: 5px;
		margin-top: 0.19rem;
		background: #ff3b57;
		color: white;
	}
	
	.pay-footer-dan {
		width: 100%;
		background: white;
		height: 2.98rem;
		margin-top: 0.15rem;
		
	}
	
	
	.pay-footer-dan p{
		line-height:0.5rem;
		margin-left: 3%;
	}
</style>